<!DOCTYPE html>
<html lang="en" class="page-fill" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all" />

</head>
<body>
<div class="layui-container" style="margin-top: 20px">
	<input type="hidden" id="company" th:value="${company!=null?company.address:''}">
	<form class="layui-form" lay-filter="customerForm" id = "customerData">
		<input type="hidden"  name="userId" th:value="${company!=null?company.userId:userId}">
		<input type="hidden" id="id" name="id" th:value="${company!=null?company.id:''}">
		<div class="layui-form-item">
			<div class="layui-inline" lay-filter="selectNet">
				<label class="layui-form-label">公司名称</label>
				<div class="layui-inline">
					<input name="companyName" lay-verify="required" th:value="${company!=null?company.companyName:''}"
						   autocomplete="off" class="layui-input">

				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
					<input type="text" name="name" lay-verify="required" th:value="${company!=null?company.name:''}"
						   autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>

		<div class="layui-form-item">

			<div class="layui-inline">
				<label class="layui-form-label">手机</label>
				<div class="layui-input-inline">
					<input type="tel" name="cellphone" lay-verify="required" th:value="${company!=null?company.cellphone:''}"
						   autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">座机</label>
				<div class="layui-input-inline">
					<input type="text" name="telephone" lay-verify="required" th:value="${company!=null?company.telephone:''}"
						   autocomplete="off" class="layui-input">
				</div>
			</div>

		</div>



		<div class="layui-form-item" id="area-picker">
			<div class="layui-inline" lay-filter="">
				<label class="layui-form-label">省份</label>
				<div class="layui-input-inline">
					<select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
						<option value="">请选择省</option>
					</select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">市</label>
				<div class="layui-input-inline">
					<select name="city" class="city-selector" data-value="" lay-filter="city-1">
						<option value="">请选择市</option>
					</select>
				</div>
			</div>
			<div class="layui-inline" >
				<label class="layui-form-label">区</label>
				<div class="layui-input-inline">
					<select name="county" class="county-selector" data-value="" lay-filter="county-1">
						<option value="">请选择区</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item" width="500px">
				<div class="layui-inline" >
					<label class="layui-form-label">地址</label>
					<div class="layui-input-inline">
						<input type="text" name="address" lay-verify="required"
							   autocomplete="off" class="layui-input">
					</div>
				</div>

			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" id="submit" lay-submit
							lay-filter="customerForm">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
			</div>
	</form>
</div>
</body>
<script type="text/javascript"  th:src="@{/lib/layui/layui.js}"></script>
<script type="text/javascript"  th:src="@{/lib/mods/layarea.js}"></script>
<script type="text/javascript" th:inline="none">


	//配置插件目录
	layui.config({
		base: '/lib/mods/'
		, version: '1.0'
	});

layui.use(['form','upload','layer','jquery','layarea'], function(){
   form = layui.form;
  var upload = layui.upload;
  form.render('select','test1');
  $ = layui.jquery;

	layarea = layui.layarea;
	var addressData = $("#company").val();

	if (addressData != undefined && addressData !='' &&addressData.length !=0) {
		var array = addressData.split(",");
		console.log("array: "+array);
		$("[name='province']").attr("data-value",array[0]) ;
		$("[name='city']").attr("data-value",array[1]) ;
		$("[name='county']").attr("data-value",array[2]) ;
		$("[name='address']").attr("value",array[3]) ;
	}

	//地址的渲染
	layarea.render({
		elem: '#area-picker',
		change: function (res) {
			//选择结果
			console.log(res);
		}
	});

			//监听提交
			form.on('submit(customerForm)', function(data) {
				var company = data.field;
				company.adress=company.province+","+company.city+","+company.county+","+company.address;

				var index = top.layer.msg('数据提交中，请稍候', {
					icon : 16,
					time : false,
					shade : 0.8
				});
				var method = "";
				console.log("addressData: "+addressData)

				if (addressData == null || addressData == undefined ||addressData.length ==0) {
					method = "addAddress";
				} else {
					method = "updateAddress";
				}
				console.log("method:"+method)
				$.post("/api/customer/"+method,company,function(d){
					if (d.code == 200) {
						//top.layer.close(index-1);
			            top.layer.msg("地址添加成功！");
						parent.layer.closeAll("iframe");
						//top.layer.closeAll()
			            //刷新父页面
			            //parent.location.reload();
					} else {
						layer.msg(d.msg,{"icon":2});
					}
				});
				return false;
			});
});
</script>
</html>